<template>
  <div class="main-div">
    <div class="main-div-top">
      <div class="main-div-top-title"></div>
    </div>
    <div class="main-div-middle">
      <div class="main-div-middle-div">
        <div class="main-div-middle-div-title">
          <!--<span style="font-size: 42px;">杭 州 云 稻 信 息 技 术 有 限 公 司</span>-->
          <span style="font-size: 32px; color: #aaaaaa">雷 甸 党 员 积 分 管 理 系 统</span>
        </div>
        <div class="main-div-middle-div-content">
          <div class="main-div-middle-div-content-login">
            <div style="padding-top: 10px">
              <el-input placeholder="请输入账号" v-model="userName">
                <template slot="prepend" >账 号：</template>
              </el-input>
            </div>
            <div style="padding-top: 10px">
              <el-input placeholder="请输入密码" v-model="userPwd" type="password">
                <template slot="prepend">密 码：</template>
              </el-input>
            </div>
            <div style="padding-top: 10px">
              <el-button
                type="success"
                @click="openFullScreen"
                v-loading.fullscreen.lock="fullscreenLoading"
                style="width: 100%; height: 40px;">
                登 录
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main-div-bottom">
      <div class="main-div-bottom-title">
        <!--<div class="main-div-bottom-title-content">地址：杭州富阳区银湖街道九龙大道398号富春硅谷创智中心2号楼5楼</div>-->
        <!--<div class="main-div-bottom-title-content">电话：0571-23277103</div>-->
        <!--<div class="main-div-bottom-title-content">传真：0571-23277100</div>-->
        <!--<div class="main-div-bottom-title-content">邮箱：sales@iyundao.cn</div>-->
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        userName: '',
        userPwd: '',
        select: '',
        fullscreenLoading: false
      }
    },
    created(){
      this.keyupSubmit();
    },
    methods: {
      keyupSubmit(){
        document.onkeydown = e => {
          let _key = window.event.keyCode;
          if (_key === 13) {
            this.openFullScreen()
          }
        }
      },
      openFullScreen() {
        this.fullscreenLoading = true;
        this.login();
      },
      login:function (userName,userPwd) {
        if(!this.userName){
          this.$notify.error({
            title: '错误',
            message: '请输入账号'
          });
          this.fullscreenLoading = false;
          return;
        }
        if(!this.userPwd){
          this.$notify.error({
            title: '错误',
            message: '请输入密码'
          });
          this.fullscreenLoading = false;
          return;
        }
        var params = {
          loginName:this.userName,
          loginPwd:this.userPwd
        };
        //发送 post 请求
        this.$http({
          url: this.$BASE_URL+'api/user/searchUserInfo',
          method: 'post',
          data: params
        }).then((res)=>{
          this.fullscreenLoading = false;
          if(res.data.code == 200){
            sessionStorage.setItem("token",res.data.token);
            this.$router.push('/Index');
          } else {
            this.$notify.error({
              title: "错误码："+res.data.code,
              message: res.data.resMessage,
              duration: 5000
            });
          }
        },(res)=>{
          this.fullscreenLoading = false;
          this.$notify.error({
            title: '错误',
            message: "服务器连接故障！",
            duration: 5000
          });
          console.log(res);
        });
      }
    }
  }
</script>
<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .main-div{
    width: 100%;
    height: 100%;
    /*background: rgba(0, 107, 211, 0.5);*/
    background: url(../../assets/partyBuildingBackground.png) no-repeat;
    background-size: cover;
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; /*将对象作为弹性伸缩盒显示*/
    flex-direction: column;
  }

  .main-div-top{
    width: 100%;
    height: 100px;
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; /*将对象作为弹性伸缩盒显示*/
    justify-content: center;
    flex-direction: row;
  }
  .main-div-top-title{
    width: 80%;
    height: 200px;
    flex-direction: row;
  }
  .main-div-middle{
    width: 100%;
    height: 500px;
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; /*将对象作为弹性伸缩盒显示*/
    justify-content: center;
    flex-direction: row;
  }
  .main-div-middle-div{
    width: 700px;
    height: 500px;
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; /*将对象作为弹性伸缩盒显示*/
    justify-content: center;
    align-items:center;
    flex-direction: column;
  }
  .main-div-middle-div-title{
    color: #ffffff;
    width: 100%;
    height: 250px;
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; /*将对象作为弹性伸缩盒显示*/
    justify-content: center;
    align-items:center;
    flex-direction: column;
  }
  .main-div-middle-div-content{
    width: 65%;
    height: 250px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid #ffffff;
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; /*将对象作为弹性伸缩盒显示*/
    justify-content: center;
    align-items:center;
    flex-direction: column;
    border-radius:10px;
  }

  .main-div-middle-div-content-login{
    width: 65%;
  }

  .main-div-bottom{
    width: 100%;
    height: 200px;
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; /*将对象作为弹性伸缩盒显示*/
    flex-direction: row;
    justify-content: center;
  }
  .main-div-bottom-title{
    width: 70%;
    height: 200px;
    color: white;
    display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/
    display: flex; /*将对象作为弹性伸缩盒显示*/
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .main-div-bottom-title-content{
    padding-top: 10px;
  }
</style>
